<template>
  <div>
    <div class="mb-20">
      <el-input style="width: 220px" v-model="name" clearable placeholder="请输入快递模版名称" />
      <el-button class="ml-10" type="primary" @click="searchExpressTemplate">搜索</el-button>
    </div>
    <PageTable :columns="columns" :data="dataSource" />
    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getExpressList"
    />
  </div>
</template>

<script>
export default {
  name: 'TemplateList',
  data() {
    return {
      name: '',
      loading: false,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      dataSource: [],
      columns: [
        {
          prop: '',
          label: '模板名称',
          render: (h, { row }) => {
            return (
              <div>
                {row.isDefault ? <span style={'color: #fc4541'}>【默认】</span> : ''}
                <span style={'color: #409eff'}>{row.name}</span>
              </div>
            )
          }
        },
        {
          prop: 'createdTime',
          label: '创建时间'
        },
        {
          label: '是否启用',
          render: (h, { row }) => {
            return <span style={'color: #999999'}>{row.isShow ? '已启用' : '未启用'}</span>
          }
        },
        {
          label: '默认状态',
          render: (h, { row }) => {
            return <span style={'color: #999999'}>{row.isDefault ? '是' : '非默认'}</span>
          }
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                <el-button type="text" onClick={() => this.updateTemplate(row.id)}>
                  编辑
                </el-button>
                {row.isShow ? (
                  <el-button
                    type="text"
                    style={'color: #999999'}
                    onClick={() => this.updateVisible(row)}
                  >
                    隐藏
                  </el-button>
                ) : (
                  <el-button type="text" onClick={() => this.updateVisible(row)}>
                    启用
                  </el-button>
                )}
                {!row.isShow ? (
                  <PopConfirm
                    id={row.id}
                    title={'确定删除该模版吗？'}
                    confirm={() => this.deleteTemplate(row.id)}
                  >
                    <el-button class="ml-10" type="text" style={'color: #999999'}>
                      删除
                    </el-button>
                  </PopConfirm>
                ) : (
                  ''
                )}
              </div>
            )
          }
        }
      ]
    }
  },
  created() {
    this.getExpressList()
  },
  mounted() {},
  methods: {
    // 获取列表
    async getExpressList() {
      const {
        data: { records, total }
      } = await this.$http.express.templateApi.getExpressTemplateList({
        params: { ...this.listQuery, name: this.name }
      })
      this.dataSource = records
      this.total = total
    },
    // 是否启用
    async updateVisible({ id, isShow }) {
      let message = isShow ? '已隐藏' : '已启用'
      const { status, msg } = await this.$http.express.templateApi.updateStatus({
        id,
        isShow: !isShow
      })
      if (status === 200) {
        this.$message.success(message)
      } else {
        this.$message.error(msg)
      }
      this.getExpressList()
    },
    // 删除
    async deleteTemplate(id) {
      const { status, msg } = await this.$http.express.templateApi.deleteExpressTemplate(id)
      if (status === 200) {
        if (this.dataSource.length === 1 && this.listQuery.pageNo > 1) {
          this.listQuery.pageNo--
        }
        this.$message.success('删除成功')
        this.getExpressList()
      } else {
        this.$message.error(msg)
      }
    },
    // 编辑快递模版
    updateTemplate(id) {
      this.$router.push({ name: 'EditExpressTemplate', query: { id } })
    },
    // 搜索快递模版
    searchExpressTemplate() {
      this.listQuery.pageNo = 1
      this.getExpressList()
    }
  }
}
</script>

<style lang="scss" scoped></style>
